<template>
  <u-modal v-model="showModal"
           :show-cancel-button="cancel"
           @confirm="submit()"
           @cancel="closes()"
           :mask-close-able="close"
           :confirm-style="style"
           :confirm-color="color"
           :cancel-style="CanelStyle"
           :show-title="titleShow"
           :content="item">
    <view class="slot-content">
      <view class="u-flex flex_j_c item" >{{item}}</view>
      <view class="cha" @click="closes">x</view>
    </view>
  </u-modal>
</template>

<script>
export default {
name: "modalItem",
  data(){
    return{
      showModal:true,
    }
  },
  props:{
    //内容
    item: {
      type: String,
      default: ''
    },
    //标题是否显示
    cancel: {
      type: Boolean,
      default: false
    },
    //标题是否显示
    titleShow: {
      type: Boolean,
      default: true
    },
    //是否遮罩层可以关闭
    close: {
      type: Boolean,
      default: false
    },
    //按钮颜色
    color:{
      type: String,
      default: '#45806E'
    },
    //标题
    title:{
      type: String,
      default: '标题'
    }
  },
  computed:{
    style(){
      return {
        width: '232rpx',
        height: '72rpx',
        background: '#45806E',
        borderRadius: '58rpx',
        color:'#fff',
        lineHeight:'72rpx',
        margin:'0 auto',
        marginBottom:'50rpx',
        flex: '0 1 232rpx',
      }
    },
    CanelStyle(){
      return {
        width: '232rpx',
        height: '72rpx',
        background: '#f2f2f2',
        borderRadius: '58rpx',
        color:'#000',
        lineHeight:'72rpx',
        margin:'0 auto',
        marginBottom:'50rpx',
        flex: '0 1 232rpx',
      }
    },
  },
  methods:{
    submit(){
      this.$emit('submit')
    },
    closes(){
      this.$emit('close')
    },
  }
}
</script>

<style scoped lang="scss">
  .slot-content{
    position: relative;
    .item{
      padding: 48rpx 0 ;
    }
    .cha{
      position: absolute;
      right: 30rpx;
      top: -80rpx;
      font-size: 38rpx;
      color: #999;
    }
  }
</style>